{% load static %}
{% include 'layout/header.html' %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网站综合信息收集</title>
    <!-- 引入 Bootstrap 样式表 -->
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1 class="mt-5 mb-4">网站综合信息收集</h1>
        <form id="infoForm">
            {% csrf_token %}
            <div class="form-group">
                <label for="param1">域名:</label>
                <input type="text" class="form-control" id="param1" name="param1" placeholder="请输入域名，example: baidu.com">
            </div>
            <button type="submit" class="btn btn-primary">收集</button>
        </form>

        <div id="infoResults" class="mt-4"></div>

        <div id="loadingMessage" class="alert alert-info" style="display: none;" role="alert">全速收集域名信息中，马上就好...</div>
    </div>

    <!-- 引入 Bootstrap JavaScript -->
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
<script>
        document.getElementById('infoForm').addEventListener('submit', function(event) {
            event.preventDefault(); // Prevent default form submission
            var formData = new FormData(event.target); // Get form data

            // Display loading message
            document.getElementById('loadingMessage').style.display = 'block';

            fetch('{% url 'InfoCollect:info_col_index' %}', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json()) // Parse JSON response
            .then(data => {
                // Hide loading message
                document.getElementById('loadingMessage').style.display = 'none';

                // Function to recursively build HTML for object
                function buildHTMLForObject(obj) {
                    var html = '<div class="card"><div class="card-body">';
                    for (var key in obj) {
                        if (obj.hasOwnProperty(key)) {
                            var value = obj[key];
                            if (typeof value === 'object') {
                                // Recursively build HTML for nested object
                                html += '<div class="mb-2"><span class="fw-bold">' + key + ':</span><div class="ms-3">' + buildHTMLForObject(value) + '</div></div>';
                            } else {
                                html += '<div class="mb-2"><span class="fw-bold">' + key + ':</span><span class="ms-2">' + value + '</span></div>';
                            }
                        }
                    }
                    html += '</div></div>';
                    return html;
                }

                // Build HTML for the object
                var objectHTML = buildHTMLForObject(data);

                // Display object HTML
                document.getElementById('infoResults').innerHTML = objectHTML;
            })
            .catch(error => {
                // Hide loading message
                document.getElementById('loadingMessage').style.display = 'none';
                console.error('Error:', error);
            });
        });
    </script>

</body>
</html>
